<!DOCTYPE html>
<head >
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>源雀scrm-企微活码</title>
    <base th:href="@{/static/}" />
    <link rel="icon" th:href="@{/img/iyque.png}" type="image/png">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
        var baseUrl = /*[[@{/}]]*/;
        /*]]>*/
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md12">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>源雀scrm-企微活码</legend>

                <blockquote class="layui-elem-quote">
                    <strong>
                        源雀SCRM — 基于SpringCloud+Vue架构,100%开放源码的企微私域营销系统:<a href="https://www.iyque.cn/" target="_blank">https://www.iyque.cn/</a>
                    </strong>
                </blockquote>

                <div class="layui-tab">
                    <ul class="layui-tab-title">
                        <li class="layui-this">员工码</li>
                        <li>默认欢迎语</li>
                        <li>系统配置</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">

                            <div class="layui-field-box">
                                <button class="layui-btn  layui-btn-sm" onclick="add()"><i class="layui-icon">&#xe61f;</i>新增</button>
                                <button class="layui-btn  layui-btn-sm" onclick="del()"><i class="layui-icon">&#xe640;</i>删除</button>
                                <button class="layui-btn   layui-btn-sm" onclick="downloadQr()"><i class="layui-icon">&#xe601;</i>活码下载</button>


                                <table id="demo" lay-filter="userCodeFilter"></table>

                            </div>

                        </div>
                        <div class="layui-tab-item" id="defaultMsgHtml">





                        </div>
                        <div class="layui-tab-item" id="corpHtml">





                        </div>
                    </div>
                </div>


            </fieldset>
        </div>
    </div>
</div>



<!-- 你的HTML代码 -->

<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/tokenStorage.js}"></script>
<script type="text/html" id="defaultMsgTpl">
    <form class="layui-form">
        <div class="layui-form-item layui-form-text">
            <input name="id" value="{{d.id?d.id:''}}" style="display: none">
            <label class="layui-form-label">欢迎语:</label>
            <div class="layui-input-block">
                <textarea id="defaultContent" name="defaultContent"  placeholder="请输入欢迎语" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-primary layui-btn-sm" onclick="addNickname(event)">插入昵称</button>
                <span class="gray-tip">（注:插入昵称后,欢迎语发送会自动带上当前客户的昵称）</span>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="defaultMsgForm">保存</button>
            </div>
        </div>
    </form>

</script>
<script type="text/html" id="corpTpl">
    <form class="layui-form" autocomplete="off">

        <fieldset class="layui-elem-field">
            <legend>应用参数配置</legend>
            <div class="layui-field-box">

                <div class="layui-form-item">
                    <input  type="number" min="1" max="100" name="id" value="{{d.id ? d.id: ''}}" style="display: none">
                    <label class="layui-form-label" >企业Id:</label>
                    <div class="layui-input-block" style="width: 400px;">
                        <input type="text" name="corpId" value="{{d.corpId ? d.corpId : ''}}" required  lay-verify="required" placeholder="请输入corpId"  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">应用Id:</label>
                    <div class="layui-input-block" style="width: 400px;">
                        <input type="text" name="agentId" value="{{d.agentId ? d.agentId : ''}}" required  lay-verify="required" placeholder="请输入agentId"  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">应用Secert:</label>
                    <div class="layui-input-block" style="width: 400px;">
                        <input type="password" name="agentSecert" value="{{d.agentSecert ? d.agentSecert : ''}}" autocomplete="off" required lay-verify="required" placeholder="请输入adgentSecert"  class="layui-input">
                    </div>
                </div>

            </div>
        </fieldset>


        <fieldset class="layui-elem-field">
            <legend>回调配置</legend>
            <div class="layui-field-box">

                <div class="layui-form-item">
                    <label class="layui-form-label">回调Url:</label>
                    <div class="layui-input-block" style="width: 400px;">
                        <input type="text" placeholder="{系统统一访问前缀}/iycallback/handle?corpId=企业Id"  class="layui-input" disabled>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">Token:</label>
                    <div class="layui-input-inline" style="width: 300px;">
                        <input type="text" name="token" required value="{{d.token ? d.token : ''}}" lay-verify="required" placeholder="请输入回调Token" class="layui-input">
                    </div>
                    <div class="layui-input-inline">
                        <!-- 添加一个按钮用于生成随机Token -->
                        <button class="layui-btn  layui-btn-primary"  onclick="generateTokenBtn(event)">随机获取</button>
                    </div>
                </div>

                <div class="layui-form-item">

                    <label class="layui-form-label">AESKey:</label>
                    <div class="layui-input-inline" style="width: 400px;">
                        <input type="text" name="encodingAESKey" value="{{d.encodingAESKey ? d.encodingAESKey : ''}}" required  lay-verify="required"   class="layui-input">
                    </div>
                    <div class="layui-input-inline">
                        <!-- 添加一个按钮用于生成随机Token -->
                        <button class="layui-btn  layui-btn-primary" onclick="generateAESKeyBtn(event)">随机获取</button>
                    </div>
                </div>


            </div>
        </fieldset>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="corpInfoForm">保存</button>
            </div>
        </div>
    </form>
</script>

<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
</script>
<style>
    .layui-form-checked[lay-skin=primary] i {
        border-color: #9553FE;
        background-color: #9553FE;
        color: #fff;
    }
</style>
<script th:inline="javascript">
    /*<![CDATA[*/
    // //一般直接写在一个js文件中

    loadTable()

    // 格式化时间的函数
    function formatDate(date) {
        var year = date.getFullYear();
        var month = ("0" + (date.getMonth() + 1)).slice(-2);
        var day = ("0" + date.getDate()).slice(-2);
        var hours = ("0" + date.getHours()).slice(-2);
        var minutes = ("0" + date.getMinutes()).slice(-2);
        // var seconds = ("0" + date.getSeconds()).slice(-2);
        return year + '年' + month + '月' + day + '日 ' + hours + ':' + minutes ;
        // return year + '年' + month + '月' + day + '日 ' + hours + ':' + minutes + ':' + seconds;
    }


    function loadTable(){
        var layer;
        layui.use(['layer', 'form','table','element','laytpl','jquery'], function(){
            layer = layui.layer;
            var table=layui.table;
            var element = layui.element;
            var laytpl=layui.laytpl;
            var form=layui.form;
            var $ = layui.jquery;

            //获取系统配置
            $.ajax({
                url: baseUrl+'iYqueConfig/findIYqueConfig',
                type: 'GET',
                success: function (data) {
                    renderCorp(laytpl,data.data);
                },
                error: function (xhr, textStatus, errorThrown) {
                    layer.msg('请求失败，错误信息：' + textStatus + ' ' + errorThrown);
                }
            });

            //获取默认欢迎语
            $.ajax({
                url: baseUrl+'iYqueDefaultMsg/findDefaultMsg',
                type: 'GET',
                success: function (data) {
                    renderDefaultMsg(laytpl,data.data);
                },
                error: function (xhr, textStatus, errorThrown) {
                    layer.msg('请求失败，错误信息：' + textStatus + ' ' + errorThrown);
                }

            })




            //活码列表
            table.render({
                elem: '#demo'
                ,url: baseUrl+'iyQue/findIYqueUserCode' //数据接口
                ,height: 750
                //重新规定返回的数据格式
                ,response: {
                    //数据状态的字段名称
                    statusName: 'code',
                    statusCode: 200,
                    msgName: 'msg', //状态信息的字段名称
                    dataName: 'data', //数据详情的字段名称
                    countName: 'count' //数据条数的字段名称，用于 table
                }
                ,page: true //开启分页
                ,cols: [[ //表头
                    {field: 'id', title: 'id',type: 'checkbox'}
                    ,{field: 'codeName', title: '活码名称'}
                    ,{field: 'codeUrl', title: '活码',height:500,templet: function(d){
                            return '<img src="'+d.codeUrl+'"/>'
                        }}
                    ,{field: 'userName', title: '使用员工'}
                    ,{field: 'tagName', title: '标签',templet: function(d) {

                            // 检查 d.tagName 是否存在并且不是空字符串
                            var tagNames = (d.tagName && d.tagName.trim() !== '') ? d.tagName.split(',') : [];

                            // 如果没有标签名，则直接返回“无”
                            if (tagNames.length === 0) {
                                return '无';
                            }

                            // 如果有标签名，则创建按钮并返回它们的 HTML
                            var buttonsHtml = tagNames.map(function(tagName) {
                                // 去除可能存在的空格，并返回按钮的 HTML 字符串
                                tagName = tagName.trim();
                                return '<button class="layui-btn layui-btn-danger layui-btn-xs">' + tagName + '</button>';
                            }).join(''); // 使用空字符串连接所有按钮的 HTML 字符串

                            // 返回包含所有按钮的 HTML 字符串
                            return buttonsHtml;

                        }
                    }
                    , {
                        field: 'updateTime',title: '更新时间',templet: function(d){

                            return formatDate(new Date(d.updateTime));
                        }}
                    ,{fixed: 'right', title: '操作', toolbar: '#tableBar'}
                ]]
            });

            // 监听工具栏事件
            table.on('tool(userCodeFilter)', function(obj){ // 将 'yourTableFilter' 替换为你的表格过滤器名称
                var data = obj.data; // 获取当前行数据
                var layEvent = obj.event; // 获取点击的事件名称
                //
                if(layEvent === 'edit') {
                    // 编辑操作
                    console.log('编辑行数据：', data);
                    edit(data.id)
                }
                console.log(obj)
            });


            saveCorpInfo(form,$);

            updateDefaultMsg(form,$);


        });


    }

    //系统配置存储
    function saveCorpInfo(form,$){

        //监听提交
        form.on('submit(corpInfoForm)', function(data){

            console.log(data.field)
            $.ajax({
                url: baseUrl+'iYqueConfig/saveOrUpdate', // 替换为你的API地址
                type: 'POST',
                data:JSON.stringify(data.field),
                contentType: 'application/json',
                success: function(response) {
                    console.log(response)
                    layer.msg('更新成功');
                    // 关闭弹出层
                    // var index = parent.layer.getFrameIndex(window.name); // 获取当前iframe层的索引
                    // parent.layer.close(index); // 关闭当前iframe层
                },
                error: function(xhr, textStatus, errorThrown) {
                    layer.msg('POST请求失败：' + textStatus + ' ' + errorThrown);
                }
            });
            return false;
        });
    }

    //渲染系统配置
    function renderCorp(laytpl,data){

        console.log(data)
        // 获取模板
        var tpl = document.getElementById('corpTpl').innerHTML;

        // 渲染模板
        laytpl(tpl).render(data, function(html){
            // 输出渲染后的HTML
            document.getElementById('corpHtml').innerHTML = html;
        });
    }

    //渲染默认欢迎语
    function renderDefaultMsg(laytpl,data){
        // 获取模板
        var tpl = document.getElementById('defaultMsgTpl').innerHTML;

        // 渲染模板
        laytpl(tpl).render(data, function(html){
            // 输出渲染后的HTML
            document.getElementById('defaultMsgHtml').innerHTML = html;
            layui.jquery("#defaultContent").val(data.defaultContent || '');
        });
    }


    //更新默认欢迎语
    function updateDefaultMsg(form,$){
        //监听提交
        form.on('submit(defaultMsgForm)', function(data){

            console.log(data.field)
            $.ajax({
                url: baseUrl+'iYqueDefaultMsg/saveOrUpdate',
                type: 'POST',
                data:JSON.stringify(data.field),
                contentType: 'application/json',
                success: function(response) {
                    layer.msg('更新成功');
                    // console.log(response)
                    // 关闭弹出层
                    // var index = parent.layer.getFrameIndex(window.name); // 获取当前iframe层的索引
                    // parent.layer.close(index); // 关闭当前iframe层
                },
                error: function(xhr, textStatus, errorThrown) {
                    layer.msg('POST请求失败：' + textStatus + ' ' + errorThrown);
                }
            });
            return false;
        });
    }

    //插入昵称
    function addNickname(event){
        event.preventDefault(); // 阻止默认行为（尽管在这里可能不是必需的）
        event.stopPropagation(); // 阻止事件冒泡（通常也不是必需的，但以防万一

        // 获取textarea的当前值
        var currentValue =  layui.jquery('textarea[name="defaultContent"]').val();
        // 添加新的内容到当前值的后面
        var newContent = '$客户昵称$'; // 你要添加的新内容
        layui.jquery('textarea[name="defaultContent"]').val(currentValue + newContent);


    }

    function add(){
        layer.open({
            type: 2,
            area: ['80%', '80%'],
            content: baseUrl+'add',
            end: function() {
                loadTable()
            }
        });

    }


    function edit(id){
        layer.open({
            type: 2,
            area: ['80%', '80%'],
            content: baseUrl+'edit?id='+id,
            end: function() {
                loadTable()
            }
        });
    }


    function del(){

        var checkedData = getCheckedData();

        if (!checkedData || checkedData.length === 0) {
            // 显示提示信息
            layer.msg('请先选择数据！', {icon: 5});
        } else {
            layer.confirm('是否删除活码,删除后活码不可恢复', {icon: 3, title:'提示'}, function(index){
                layui.jquery.ajax({
                    url: baseUrl+'iyQue/' + checkedData.map(function (item) {
                        return item.id;
                    }).join(','),
                    type: 'DELETE',
                    success: function(response) {
                        // 请求成功时的处理逻辑
                        layer.close(index);
                        loadTable()
                    },
                    error: function(error) {
                        // 请求失败时的处理逻辑
                        layer.msg("请求失败"+error)
                        console.log(error);
                    }
                });

            });
        }
    }


    //活码下载
    function downloadQr(){
        var checkedData = getCheckedData();

        if (!checkedData || checkedData.length === 0) {
            // 显示提示信息
            layer.msg('请先选择数据！', {icon: 5});
        } else {
            var zip = new JSZip();
            var promises = [];

            checkedData.forEach(function(item, index){
                var promise = fetch(item.codeUrl)
                    .then(response => response.blob())
                    .then(blob => {
                        zip.file(item.codeName + (index + 1) + '.jpg', blob);
                    });
                promises.push(promise);
            });

            Promise.all(promises).then(function(){
                zip.generateAsync({type: "blob"})
                    .then(function(content) {
                        saveAs(content, "qrcodes.zip");
                    });
            });


            // var link = document.createElement('a');
            // link.style.display = 'none';
            // document.body.appendChild(link);
            // // 遍历活码数组，逐个下载
            // checkedData.forEach(function (item, index) {
            //     link.href = item.codeUrl;
            //     link.download = 'qrcode' + (index + 1) + '.jpg'; // 设置下载文件名
            //     link.click();
            // });
            //
            // // 移除隐藏的 a 标签
            // document.body.removeChild(link);
        }

    }

    function getCheckedData() {
        // 获取表格对象
        var table = layui.table;
        // 获取选中的数据
        var checkStatus = table.checkStatus('demo'); // 请将 'yourTableId' 替换为你的表格ID
        return  checkStatus.data;
    }


    //随机获取token
    function generateTokenBtn(event){

        event.preventDefault(); // 阻止默认行为（尽管在这里可能不是必需的）
        event.stopPropagation(); // 阻止事件冒泡（通常也不是必需的，但以防万一



        // 更新输入框的值
        layui.jquery('input[name="token"]').val(generateRandomString(28));


    }


    //随机获取AESKey
    function generateAESKeyBtn(event){

        event.preventDefault(); // 阻止默认行为（尽管在这里可能不是必需的）
        event.stopPropagation(); // 阻止事件冒泡（通常也不是必需的，但以防万一



        // 更新输入框的值
        layui.jquery('input[name="encodingAESKey"]').val(generateRandomString(43));


    }



    function generateRandomString(length) {
        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        let result = '';
        const charactersLength = characters.length;
        for (let i = 0; i < length; i++) {
            result += characters.charAt(Math.floor(Math.random() * charactersLength));
        }
        return result;
    }

    /*]]>*/
</script>
</body>
</html>